<template>
  <div class="mt-[3vw] ml-auto mr-auto relative w-full max-w-[730px] rounded-[100px] px-12 py-6 bg-[#4b5893] text-left my-8">
    <div class="h-[8px] relative">
      <div class="absolute inset-0 rounded-[100px] overflow-hidden pointer-events-none transition-opacity duration-300 ease-[ease] h-full ">
        <div class="absolute top-0 right-0 w-full h-2 rounded-[100px] bg-[rgb(0,228,73)]"></div>
        <div class="absolute top-0 left-0 h-2 rounded-[100px] bg-[rgb(241,2,96)]" :style="{'width': amount + '%'}"></div>
      </div>
      <div class="absolute top-1/2 left-0 w-full -translate-y-1/2">
        <span class="absolute top-1/2 -translate-y-1/2 text-[12px] text-[rgba(255,255,255,0.6)]" style="left: -2em;">0</span>
        <span class="absolute top-1/2 -translate-y-1/2 text-[12px] text-[rgba(255,255,255,0.6)]" style="right: -2.5em;">100</span>
      </div>
      <input type="range" :min="2" :max="98" class="touch-manipulation range-thumb appearance-none absolute top-0 z-10 w-full h-2 bg-[rgba(0,0,0,0)]" v-model="amount" >
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const amount=ref(50)
</script>
<style scoped >
.range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 37px;
  height: 37px;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  content: '|||';
  color: antiquewhite;
  touch-action: manipulation;
}

.range-thumb::-moz-range-thumb {
  width: 37px;
  height: 37px;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  content: '|||';
  color: antiquewhite;
  touch-action: manipulation;
}
</style>
